<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define parameters and coordinates
        const groundY = 400;
        const Ax = 150;
        const h0_pixels = 150;
        const Ay = groundY - h0_pixels;
        const l_pixels = 180;
        const angle_deg = 60;
        const angle_rad = angle_deg * Math.PI / 180;

        // Calculate coordinates for point B
        const Bx = Ax + l_pixels * Math.cos(angle_rad);
        const By = Ay - l_pixels * Math.sin(angle_rad);

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // --- Draw Ground ---
        ctx.beginPath();
        ctx.moveTo(30, groundY);
        ctx.lineTo(470, groundY);
        ctx.stroke();

        // Draw hatching for the ground
        ctx.lineWidth = 1;
        for (let i = 40; i < 470; i += 15) {
            ctx.beginPath();
            ctx.moveTo(i, groundY);
            ctx.lineTo(i - 10, groundY + 10);
            ctx.stroke();
        }
        ctx.lineWidth = 2;

        // --- Draw Horizontal Reference Line ---
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(Ax - 100, Ay);
        ctx.lineTo(Ax + 200, Ay);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // Draw text "水平方位线"
        ctx.font = '22px KaiTi'; // Use a font that supports Chinese characters
        ctx.textAlign = 'left';
        ctx.fillText('水平方位线', Ax + 60, Ay + 30);


        // --- Draw Rod AB ---
        ctx.beginPath();
        ctx.moveTo(Ax, Ay);
        ctx.lineTo(Bx, By);
        ctx.stroke();

        // --- Draw Labels (A, B, l) ---
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('A', Ax - 25, Ay + 10);
        ctx.fillText('B', Bx + 5, By - 5);
        // Position label 'l' next to the rod's midpoint
        const midX = (Ax + Bx) / 2;
        const midY = (Ay + By) / 2;
        const perp_dx = -(By - Ay); // Perpendicular vector component
        const perp_dy = (Bx - Ax);
        const norm = Math.sqrt(perp_dx*perp_dx + perp_dy*perp_dy);
        const label_l_X = midX + 20 * perp_dx / norm;
        const label_l_Y = midY + 20 * perp_dy / norm;
        ctx.fillText('l', label_l_X - 15, label_l_Y + 10);


        // --- Draw Angle Arc and Label ---
        const arcRadius = 40;
        ctx.beginPath();
        ctx.arc(Ax, Ay, arcRadius, 0, -angle_rad, true); // angles are clockwise in canvas from positive x-axis
        ctx.stroke();
        
        ctx.font = '20px Times New Roman';
        ctx.fillText('60°', Ax + arcRadius - 10, Ay - 10);

        // --- Draw Height h₀ ---
        // Vertical line
        ctx.beginPath();
        ctx.moveTo(Ax - 40, Ay);
        ctx.lineTo(Ax - 40, groundY);
        ctx.stroke();

        // Arrowhead at the top
        ctx.beginPath();
        ctx.moveTo(Ax - 40, Ay);
        ctx.lineTo(Ax - 45, Ay + 10);
        ctx.moveTo(Ax - 40, Ay);
        ctx.lineTo(Ax - 35, Ay + 10);
        ctx.stroke();

        // Arrowhead at the bottom
        ctx.beginPath();
        ctx.moveTo(Ax - 40, groundY);
        ctx.lineTo(Ax - 45, groundY - 10);
        ctx.moveTo(Ax - 40, groundY);
        ctx.lineTo(Ax - 35, groundY - 10);
        ctx.stroke();
        
        // Label h₀
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('h', Ax - 70, Ay + h0_pixels/2 - 5);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('0', Ax - 60, Ay + h0_pixels/2 + 5);

    </script>
</body>
</html>